<template>
  <view class="sx-dropdown-menu" :class="{'setDropdownBottom':maskVisibility}"
        :style="{'top':(fixed? menuTop: 0) +'rpx', position: fixed? 'fixed': 'initial', flexDirection:  fixed? 'initial': 'column'}"
        @touchmove.stop.prevent="discard" @tap.stop="discard">
    <!-- 顶部菜单 -->
    <view class="nav">
      <block v-for="(item,index) in menu" :key="index">
        <view class="first-menu" :class="{'on':showPage==index || item.status}" @tap="togglePage(item,index)">
          <text class="name">{{ item.name }}</text>
          <UIcon v-if="item.icon" :type="item.icon"
                     :color="showPage==index || item.status? '$uni-color-primary': ''"></UIcon>
          <text v-else-if="!['none','sort','route'].includes(item.type)" class="iconfont triangle"
                :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
          <view class="inline-block" v-if="item.type === 'sort'">
            <view class="sx-dropdown-menu__item--sort">
              <text class="iconfont triangle sx-dropdown-menu__icon--top"
                    :style="item.status===menuData[index].submenu[0].submenu[1].value ?'color: #BFC0C3':''"></text>
              <text class="iconfont triangle sx-dropdown-menu__icon--down"
                    :style="item.status===menuData[index].submenu[0].submenu[0].value ?'color: #BFC0C3':''"></text>
            </view>
          </view>
        </view>
      </block>
    </view>
    <!-- 遮罩层 -->
    <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="hideMenu(false)"></view>
    <block v-for="(page,page_index) in subData" :key="page_index">
      <view class="sub-menu-class"
            :style="{top:  fixed? `${menuTop}px` : 'initial', marginTop: fixed? 0: '44px' }"
            :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
        <!-- 多级菜单 -->
        <block v-if="(page.type=='hierarchy'||page.type=='hierarchy-column')&& page.submenu.length>0">
          <!-- 第一级菜单 -->
          <scroll-view class="sub-menu-list"
                       :class="{'first':activeMenuArr[page_index].length>1,'alone':activeMenuArr[page_index].length<=1}"
                       :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
            <block v-for="(sub,index) in page.submenu" :key="sub.value">
              <view class="sub-menu" :id="'first_id'+index"
                    :class="{'on':activeMenuArr[page_index][0]==index}"
                    @tap="selectHierarchyMenu(page_index,index,null,null)">
                <view class="menu-name">
                  <text>{{ sub.name }}</text>
                  <text class="iconfont selected"></text>
                </view>
              </view>
            </block>
          </scroll-view>

          <block v-if="page.type=='hierarchy'">
            <block v-for="(sub,index) in page.submenu" :key="sub.value">
              <!-- 第二级菜单 -->
              <scroll-view class="sub-menu-list not-first" :scroll-y="true"
                           v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
                           :scroll-into-view="'second_id'+secondScrollInto">
                <block v-for="(sub_second,second_index) in sub.submenu" :key="sub_second.value">
                  <view class="sub-menu" :id="'second_id'+second_index"
                        :class="{'on':activeMenuArr[page_index][1]==second_index}">
                    <view class="menu-name"
                          @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
                      <text>{{ sub_second.name }}</text>
                      <text class="iconfont selected"></text>
                    </view>
                    <!-- 第三级菜单 -->
                    <view class="more-sub-menu"
                          v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0">
                      <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2.value">
                        <text v-if="sub_second.showAllSub || (sub2_index<8)"
                              :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
                              @tap.stop="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">
                          {{ sub2.name }}
                        </text>
                        <text
                            v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9"
                            @tap.stop="showMoreSub(second_index)">更多
                          <text
                              class="iconfont triangle"></text>
                        </text>
                      </block>
                    </view>
                  </view>
                </block>
              </scroll-view>
            </block>
          </block>

          <!-- 二三级菜单都是行形态 -->
          <block v-else-if="page.type=='hierarchy-column'">
            <!-- 第二级菜单 -->
            <block v-for="(sub,index) in page.submenu" :key="index">
              <scroll-view class="sub-menu-list not-first" :scroll-y="true"
                           v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
                           :scroll-into-view="'second_id'+secondScrollInto">
                <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
                  <view class="sub-menu" :id="'second_id'+second_index"
                        :class="{'on':activeMenuArr[page_index][1]==second_index}">
                    <view class="menu-name"
                          @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
                      <text>{{ sub_second.name }}</text>
                    </view>
                  </view>
                </block>
              </scroll-view>
            </block>
            <!-- 第三级菜单 -->
            <block v-for="(sub,index) in page.submenu">
              <block v-for="(sub_second,second_index) in sub.submenu">
                <scroll-view class="sub-menu-list not-first third" :scroll-y="true"
                             v-if="activeMenuArr[page_index][0]==index&&activeMenuArr[page_index][1]==second_index&&sub_second.submenu.length>0"
                             :scroll-into-view="'third_id'+thirdScrollInto">
                  <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index">
                    <view class="sub-menu" :id="'third_id'+sub2_index"
                          :class="{'on':activeMenuArr[page_index][2]==sub2_index}">
                      <view class="menu-name"
                            @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">
                        <text>{{ sub2.name }}</text>
                      </view>
                    </view>
                  </block>
                </scroll-view>
              </block>
            </block>
          </block>


        </block>


        <!-- 多选筛选 -->
        <block v-if="page.type=='filter'">
          <view class="filter">
            <scroll-view class="menu-box" :scroll-y="true">
              <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
                <view class="title" v-if=" page.submenu.length >1">{{ box.name }}</view>
                <view class="labels">
                  <view v-for="(label,label_index) in box.submenu" :key="label_index"
                        @tap="selectFilterLabel(page_index,box_index,label_index)"
                        :class="{'on':label.selected}">{{ label.name }}
                  </view>
                </view>
              </view>
              <slot name="filter"></slot>
            </scroll-view>
            <view class="btn-box">
              <view class="reset" @tap="resetFilterData(page_index)">重置</view>
              <view class="submit" @tap="setFilterData(page_index)">确定</view>
            </view>
          </view>
        </block>

        <!-- 单选筛选 -->
        <block v-if="page.type=='radio'">
          <view class="filter">
            <scroll-view class="menu-box" :scroll-y="true">
              <view  class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
                <view class="title">{{ box.name }}</view>
                <view class="labels" v-if="box.submenu">
                  <view v-for="(label,label_index) in box.submenu" :key="label_index"
                        @tap="selectRadioLabel(page_index,box_index,label_index)"
                        :class="{'on':label.selected}">{{ label.name }}
                  </view>
                </view>
                <!--    如果为时间            -->
                <USlider v-if="box.type=='year'" :blockStyle="{width: '100px'}" v-model="year" :showValue="true" step="1"  min="1" max="50"  activeColor="$uni-color-primary" inactiveColor="#c0c4cc" ></USlider>
              </view>

              <slot name="radio"></slot>
            </scroll-view>
            <view class="btn-box">
              <view class="reset" @tap="resetFilterData(page_index)">重置</view>
              <view class="submit" @tap="setFilterData(page_index)">确定</view>
            </view>
          </view>
        </block>

        <!--年份选择 只能选择 1 - 50 使用滑动条-->
        <block v-if="page.type=='year'">
          <view class="filter">
            <scroll-view class="menu-box" :scroll-y="true">
              <slot name="year"></slot>
            </scroll-view>
            <view class="btn-box">
              <view class="reset" @tap="resetFilterData(page_index)">重置</view>
              <view class="submit" @tap="menuNameChange">确定</view>
            </view>
          </view>
        </block>



      </view>
    </block>
  </view>
</template>
<script>
// 导入样式 slider
import USlider from "../../../uview-ui/components/u-slider/u-slider.vue";
import UIcon   from "../../../uni-icons/components/uni-icons/uni-icons.vue";
// 导入所有样式import uView from '@/uni_modules/uview-ui'文件;

export default {
  name: 'SxDropdownMenu',
  components: {
    USlider,
    UIcon
  },
  data() {
    return {
      menuData: [],
      subData: [], //菜单数据
      menu: [], //顶部菜单数据
      showPage: this.current, //菜单页面显示/隐藏动画控制
      pageState: [], //页面的状态
      activeMenuArr: [], //UI状态
      shadowActiveMenuArr: [], //记录选中
      defaultActive: [],
      triangleDeg: [], //小三角形的翻转动画控制
      isShowMask: false, //遮罩层显示/隐藏动画控制
      maskVisibility: false, //遮罩层显示/隐藏状态
      year: 1, //年份选择

      //滚动区域定位
      firstScrollInto: 0,
      secondScrollInto: 0,
      thirdScrollInto: 0,
      componentTop: 0, //组件top
      isReadNewSelect: false,

    }
  },
  props: {
    menuTop: {
      value: Number,
      default: 0
    },
    filterData: {
      value: Array,
      default() {
        return []
      }
    },
    defaultSelected: {
      value: Array,
      default() {
        return []
      }
    },
    updateMenuName: {
      value: Boolean,
      default: true
    },
    current: {
      type: Number,
      default: -1,
    },
    fixed: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    filterData: {
      handler(newVal) {
        console.log('watch filterData');
        this.menuData = JSON.parse(JSON.stringify(newVal));
        this.initMenu(); //filterData重新赋值初始化菜单
      },
      immediate: true,
      deep: true
    },
    defaultSelected(newVal) {

      if (newVal.length == 0) {
        return;
      }
      this.defaultActive = JSON.parse(JSON.stringify(newVal));
      this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
      this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
      if (this.updateMenuName) {
        this.setMenuName();
      }
    }
  },
  methods: {
    initMenu() {

      let tmpMenuActiveArr = [];
      let tmpMenu = [];
      for (let i = 0; i < this.menuData.length; i++) {
        let tmpitem = this.menuData[i];
        tmpMenu.push({
          //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
          name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
          type: tmpitem.type,
          value: tmpitem.value,
          icon: tmpitem.icon
        });
        //初始化选中项数组-ui状态
        tmpMenuActiveArr.push(this.processActive(tmpitem));
        //初始化角度数组
        this.triangleDeg.push(0);
        //初始化控制显示状态数组
        this.pageState.push(false);
        //递归处理子菜单数据
        tmpitem = this.processSubMenu(tmpitem);
        this.menuData[i] = tmpitem;
      }
      this.menu = tmpMenu;
      //初始化选中项数组
      tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ?
          this.activeMenuArr : tmpMenuActiveArr;
      this.defaultActive = [];
      this.activeMenuArr.splice(0, this.activeMenuArr.length, ...JSON.parse(JSON.stringify(tmpMenuActiveArr)));
      // this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
      this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
      //加载菜单数据
      this.subData = this.menuData;
      //设定顶部菜单名字
      if (this.updateMenuName) {
        this.setMenuName();
      }
    },
    setMenuName() {
      for (var i = 0; i < this.activeMenuArr.length; i++) {
        let row = this.activeMenuArr[i];
        if (this.subData[i].type == 'hierarchy' || this.subData[i].type == 'hierarchy-column') {
          if (typeof (row[0]) == 'number') {
            let tmpsub = this.subData[i].submenu[row[0]];
            if (row.length > 1) {
              tmpsub = tmpsub.submenu[row[1]] || tmpsub;
              if (row.length > 2) {
                tmpsub = tmpsub.submenu[row[2]] || tmpsub;
              }
            }
            this.menu[i].name = tmpsub.name;
          } else {
            this.menu[i].name = this.subData[i].name;
          }
        }
      }
    },
    //展开更多
    showMoreSub(index) {
      this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
      this.$forceUpdate();
    },
    //选中
    selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
      console.log('selectHierarchyMenu');
      //读取记录
      if (level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index].length > 0 && this
          .shadowActiveMenuArr[page_index][0] == level1_index) {
        this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[
            page_index])));
      }
      /////////
      let tmpArr = new Array(this.activeMenuArr[page_index].length).fill(null);
      this.activeMenuArr[page_index].splice(0, this.activeMenuArr[page_index].length, ...tmpArr);
      ////////
      this.activeMenuArr[page_index].splice(0, 1, level1_index);
      let tmpMemu = this.subData[page_index].submenu[level1_index];
      if (tmpMemu.submenu.length == 0) {
        this.selectedMemu(page_index, level1_index, level2_index, level3_index);
      } else if (level2_index != null) {
        this.activeMenuArr[page_index].splice(1, 1, level2_index);
        tmpMemu = tmpMemu.submenu[level2_index];
        if (tmpMemu.submenu.length == 0 || (this.menu[page_index].type == 'hierarchy' && level3_index ==
            null)) {
          this.selectedMemu(page_index, level1_index, level2_index, level3_index);
        } else if (level3_index != null) {
          this.activeMenuArr[page_index].splice(2, 1, level3_index);
          tmpMemu = tmpMemu.submenu[level3_index];
          this.selectedMemu(page_index, level1_index, level2_index, level3_index);
        }
      }
    },
    selectedMemu(page_index, level1_index, level2_index, level3_index) {
      let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
      if (this.updateMenuName) {
        this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (
            level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name;
      }
      this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
      this.hideMenu(true);
    },
    //写入结果，筛选
    setFilterData(page_index) {
      this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
      console.log('setFilterData', this.shadowActiveMenuArr[page_index]);
      this.hideMenu(true);
    },
    //重置结果和ui，筛选
    resetFilterData(page_index) {
      let tmpArr = [];
      let level = this.shadowActiveMenuArr[page_index].length;
      while (level > 0) {
        tmpArr.push([]);
        let box = this.subData[page_index].submenu[level - 1].submenu;
        for (let i = 0; i < box.length; i++) {
          this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
        }
        level--;
      }
      this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
      this.$forceUpdate();
      this.$emit('on-reset', page_index)
    },
    //选中筛选类label-UI状态
    selectFilterLabel(page_index, box_index, label_index) {
      let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
      if (find_index > -1) {
        this.activeMenuArr[page_index][box_index].splice(find_index, 1);
        this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
      } else {
        this.activeMenuArr[page_index][box_index].push(label_index);
        this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
      }
      this.$forceUpdate();
    },
    //选中单选类label-UI状态
    selectRadioLabel(page_index, box_index, label_index) {

      let activeIndex = this.activeMenuArr[page_index][box_index][0];
      if (activeIndex == label_index) {
        this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
        this.activeMenuArr[page_index][box_index][0] = null;
      } else {
        if (activeIndex != null && activeIndex < this.subData[page_index].submenu[box_index].submenu.length) {
          this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
        }

        this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
        this.activeMenuArr[page_index][box_index][0] = label_index;
      }
      this.$forceUpdate();
    },
    //菜单开关
    togglePage(item, index) {
      if (['none', 'sort'].includes(item.type)) {
        this.hideMenu();
        const newItem = {
          ...item
        }
        this.menu.forEach((v, j) => {
          if (v.type === 'none') {
            v.status = 0
          } else if (v.type === 'sort' && index !== j) {
            v.status = 0
          }
          // if (['none', 'sort'].includes(v.type) && item.type === 'sort' && index !== j) {
          // 	v.status = 0
          // }
        })

        if (item.type === 'none') {
          newItem.status = 1
        } else if (item.type === 'sort') {
          const items = this.menuData[index].submenu[0].submenu
          const a = items[0].value
          const b = items[1].value
          if (item.status === a) {
            newItem.status = b
          } else if (item.status === a) {
            newItem.status = b
          } else {
            newItem.status = a
          }
        }
        console.log(item, newItem)
        this.$set(this.menu, index, newItem)
        this.confirm()
      } else if (item.type === 'route') {
        console.log(item)
        uni.navigateTo({
          url: item.value
        })
      } else {

        if (this.isToggleing) {
          return;
        }
        this.isToggleing = true;
        if (index == this.showPage) {
          this.hideMenu();
        } else {
          this.showMenu(index)
        }
        setTimeout(() => {
          this.isToggleing = false;
        }, 150)
      }
    },
    //hide菜单
    hideMenu(isTriggerConfirm) {
      this.hideMenuLayer(true);
      this.hideMaskLayer();
      this.showPage = -1;
      if (isTriggerConfirm) {
        this.confirm()
      }
      this.$emit('on-hide')
    },
    showMenu(index) {
      if (this.showPage > -1) {
        this.hideMenuLayer(false);
      }
      this.showMenuLayer(index);
      this.showMaskLayer();
      this.$emit('on-show')
    },
    //hide遮罩层
    hideMaskLayer() {
      this.isShowMask = false;
      setTimeout(() => {
        this.maskVisibility = false;
      }, 200);
    },
    //show遮罩层
    showMaskLayer() {
      this.maskVisibility = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.isShowMask = true;
        }, 0)
      })
    },
    //hide菜单页
    hideMenuLayer(isAnimation) {
      this.triangleDeg[this.showPage] = 0;
      let tmpIndex = this.showPage;
      if (isAnimation) {
        setTimeout(() => {
          this.pageState.splice(tmpIndex, 1, false);
        }, 200);
      } else {
        this.pageState.splice(tmpIndex, 1, false)
      }
      this.firstScrollInto = null;
      this.secondScrollInto = null;
    },
    //show菜单页
    showMenuLayer(index) {
      this.processPage(index);
      this.pageState.splice(index, 1, true);
      this.$nextTick(() => {
        setTimeout(() => {
          this.showPage = index;
        }, 0)
      })
      this.triangleDeg[index] = 180;
    },
    confirm() {
      let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
      let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
      //对结果做一下处理
      index.forEach((item, i) => {
        if (typeof (item[0]) == 'object' && item[0] !== null) {
          let flag = false;
          //针对筛选结果过一个排序
          item.forEach((s, j) => {
            if (s != null) {
              s.sort((val1, val2) => {
                return val1 - val2;
              });
              item[j] = s;
              s.forEach((v, k) => {
                value[i][j][k] = (v == null || v >= this.subData[i].submenu[j]
                    .submenu.length) ? null : this.subData[i].submenu[j]
                    .submenu[v].value;
                if (this.subData[i].type == 'radio' && value[i][j][k] ==
                    null) {
                  value[i][j] = [];
                  index[i][j] = [];
                }
              });
            }
            if (s.length > 0) {
              flag = true
              this.$set(this.menu, i, {
                ...this.menu[i],
                status: 1
              })
            } else if (flag === false) (
                this.menu[i].status = 0
            )
          });
        } else if (item.length > 0 && item.some(v => !!v)) {
          let submenu = this.subData[i].submenu[item[0]];
          value[i][0] = submenu.value;
          if (value[i].length >= 2 && item[1] != null) {
            if (submenu.submenu.length > 0) {
              submenu = submenu.submenu[item[1]];
              value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null;
            } else {
              value[i][1] = null
            }
            if (value[i].length >= 3 && item[2] != null) {
              if (submenu.submenu.length > 0) {
                submenu = submenu.submenu[item[2]];
                value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null;
              } else {
                value[i][2] = null;
              }
            }
          }
        } else {
          console.log(item)
          const menuItem = this.menu[i]
          const {
            type,
            status
          } = menuItem
          switch (type) {
            case 'none':
              break;
            case 'sort':
              value[i] = status
              break;
          }
        }

        index[i] = item;

      });
      // 输出
      this.$emit('confirm', {
        index: index,
        value: value
      });

      console.log({
        index: index,
        value: value
      })
    },


    reloadActiveMenuArr() {
      for (let i = 0; i < this.menuData.length; i++) {
        let tmpitem = this.menuData[i];
        let tmpArr = this.processActive(tmpitem);
        tmpitem = this.processSubMenu(tmpitem);
        if (this.activeMenuArr[i].length != tmpArr.length) {
          this.menuData[i] = tmpitem;
          this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
          this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
        }
      }
      this.subData = this.menuData;
      this.$forceUpdate();
    },
    processPage(index) {
      //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
      this.reloadActiveMenuArr();
      //重置UI控制数组
      this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
      if (this.menu[index].type == 'filter') {
        //重载筛选页选中状态
        let level = this.shadowActiveMenuArr[index].length;
        for (let i = 0; i < level; i++) {
          let box = this.subData[index].submenu[i].submenu;
          for (let j = 0; j < box.length; j++) {
            if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
              this.subData[index].submenu[i].submenu[j].selected = true;
            } else {
              this.subData[index].submenu[i].submenu[j].selected = false;
            }
          }
        }
      } else if (this.menu[index].type == 'hierarchy') {
        this.$nextTick(() => {
          setTimeout(() => {
            //滚动到选中项
            this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
            this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
          }, 0);
        })
      } else if (this.menu[index].type == 'hierarchy-column') {
        this.$nextTick(() => {
          setTimeout(() => {
            //滚动到选中项
            this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
            this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
            this.thirdScrollInto = parseInt(this.activeMenuArr[index][2]);
          }, 0);
        })
      } else if (this.menu[index].type == 'radio') {
        //重载筛选页选中状态
        let level = this.shadowActiveMenuArr[index].length;
        for (let i = 0; i < level; i++) {
          let box = this.subData[index].submenu[i].submenu;
          for (let j = 0; j < box.length; j++) {
            if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
              this.subData[index].submenu[i].submenu[j].selected = true;
            } else {
              this.subData[index].submenu[i].submenu[j].selected = false;
            }
          }
        }
      }
    },
    processActive(tmpitem) {
      let tmpArr = []
      if ((tmpitem.type == 'hierarchy' || tmpitem.type == 'hierarchy-column') && tmpitem.hasOwnProperty(
          'submenu') && tmpitem.submenu.length > 0) {
        let level = this.getMaxFloor(tmpitem.submenu);
        while (level > 0) {
          tmpArr.push(null);
          level--;
        }
      } else if (tmpitem.type == 'filter') {
        let level = tmpitem.submenu.length;
        while (level > 0) {
          tmpArr.push([]);
          level--;
        }
      } else if (tmpitem.type == 'radio') {
        let level = tmpitem.submenu.length;
        while (level > 0) {
          tmpArr.push([]);
          level--;
        }
      }
      return tmpArr;
    },
    processSubMenu(menu) {
      if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
        for (let i = 0; i < menu.submenu.length; i++) {
          menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
        }
      } else {
        menu.submenu = [];
      }
      return menu;
    },
    //计算菜单层级
    getMaxFloor(treeData) {
      let floor = 0
      let max = 0

      function each(data, floor) {
        data.forEach(e => {
          max = floor > max ? floor : max;
          if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
            each(e.submenu, floor + 1)
          }
        })
      }

      each(treeData, 1)
      return max;
    },
    discard() {

    },
    changeMenuName(index, name) {
      console.log('changeMenuName', index, name);
      this.menu[index].name = name;
    },
    //向上级组件暴露方法changeMenuName
    menuNameChange(index, name) {
     this.$emit('menuNameChange', this.changeMenuName);
     //关闭菜单
      this.hideMenu(true);
    }

  },



}
</script>
<style lang="scss">
.sx-dropdown-menu {
  flex-shrink: 0;
  width: 100%;
  position: fixed;
  z-index: 997;
  flex-wrap: nowrap;
  display: flex;
  flex-direction: row;
  top: var(--window-top);
  left: 0;
  // top:100px;
  overflow-y: hidden;

  &.setDropdownBottom {
    // height: 345px;
    bottom: 0;
  }

  view {
    display: flex;
    flex-wrap: nowrap;
  }
}

.region {
  flex: 1;
  height: 44px;
}

.nav {
  width: 100%;
  height: 44px;
  border-bottom: solid 1rpx #eee;
  z-index: 12;
  // background-color: #ffffff;
  flex-direction: row;

  .first-menu {
    width: 100%;
    font-size: 24rpx;
    color: #3D3F42;

    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: color .2s linear;

    &.on {
      color: $uni-color-primary;
      font-weight: bold;

      .iconfont {
        color: $uni-color-primary;
      }
    }

    .name {
      font-size: 28rpx;
      height: 38rpx;
      text-align: center;
      text-overflow: clip;
      overflow: hidden;
    }

    .iconfont {
      width: 13px;
      height: 13px;
      align-items: center;
      justify-content: center;
      transition: transform .2s linear, color .2s linear;
    }
  }
}

.sub-menu-class {
  width: 100%;
  position: absolute;
  left: 0;
  top: 102px;
  // transform: translate3d(0, - 100%, 0);
  max-height: 345px;
  background-color: #ffffff;
  z-index: 11;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
  overflow: hidden;
  flex-direction: row;
  // transition: transform .15s linear;

  &.hide {
    display: none;
  }

  &.show {
    // transform: translate3d(0, calc(44px + 1rpx), 0);
  }
}

.sub-menu-list {
  width: 100%;
  height: 345px;
  flex-direction: column;

  .sub-menu {
    min-height: 44px;
    font-size: 13px;
    flex-direction: column;
    padding-right: 15px;

    > .menu-name {
      height: 44px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      > .iconfont {
        display: none;
        font-size: 18px;
        color: $uni-color-primary;
      }
    }
  }

  &.first {
    flex-shrink: 0;
    width: 236rpx;
    background-color: #f6f6f6;

    .sub-menu {
      padding-left: 15px;

      &.on {
        background-color: #fff;
      }
    }

    box-shadow: 5rpx 0 5rpx rgba($color: #000000, $alpha: 0.1);
  }

  &.alone {
    max-height: 345px;
    min-height: 170px;
    height: auto;

    .sub-menu {
      min-height: calc(44px - 1rpx);
      margin-left: 15px;
      border-bottom: solid 1rpx #e5e5e5;

      &.on {
        color: $uni-color-primary;

        > .menu-name {
          > .iconfont {
            display: block;
          }
        }
      }
    }
  }

  &.third {
    // box-shadow: 5rpx 0 20rpx rgba($color: #000000, $alpha: 0.2) inset;
  }

  &.not-first {
    box-shadow: 5rpx 0 5rpx rgba($color: #000000, $alpha: 0.1);

    .sub-menu {
      min-height: calc(44px - 1rpx);
      margin-left: 15px;
      border-bottom: solid 1rpx #e5e5e5;

      > .menu-name {
        height: calc(44px - 1rpx);

        > .iconfont {
          display: none;
          font-size: 18px;
          color: $uni-color-primary;
        }
      }

      &.on {
        color: $uni-color-primary;

        > .menu-name {
          > .iconfont {
            display: block;
          }
        }
      }

      .more-sub-menu {
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 9px;

        > text {
          height: 30px;
          border-radius: 3px;
          background-color: #f5f5f5;
          color: #9b9b9b;
          margin-bottom: 6px;
          margin-right: 6px;
          text-align: center;
          line-height: 30px;
          border: solid #f5f5f5 1rpx;
          flex: 0 0 calc(33.33% - 6px);
          overflow: hidden;
          font-size: 12px;

          &:nth-child(3n) {
            margin-right: 0;
          }

          &.on {
            border-color: #f6c8ac;
            color: $uni-color-primary;
          }

          .iconfont {
            color: #9b9b9b;
          }
        }
      }
    }
  }
}

.mask {
  z-index: 10;
  position: fixed;
  top: 170px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color .15s linear;

  &.show {
    background-color: rgba(0, 0, 0, 0.5);
  }

  &.hide {
    display: none;
  }
}

/* 字体图标 */
@font-face {
  font-family: "HM-FD-font";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
}

.iconfont {
  font-family: "HM-FD-font" !important;
  font-size: 13px;
  font-style: normal;
  color: #757575;

  &.triangle {
    &:before {
      content: "\e65a";
    }
  }

  &.selected {
    &:before {
      content: "\e607";
    }
  }
}
</style>

<style lang="scss">
.sx-dropdown-menu {
  background-color: white;

  .filter {
    width: 100%;
    height: 345px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .menu-box {
      width: 698rpx;
      height: calc(345px - 75px);
      flex-shrink: 1;

      /deep/ .box {
        width: 100%;
        padding-top: 16px;
        flex-direction: column;

        .title {
          width: 100%;
          font-size: 13px;
          color: #888;
        }

        .labels {
          flex-direction: row;
          flex-wrap: wrap;

          .on {
            // border-color:  $uni-color-primary;
            background-color: #d7ebe9;
            color: $uni-color-primary;
            font-weight: 500;
          }

          > view {
            box-sizing: border-box;
            width: calc((698rpx - 30rpx * 3) / 4);
            height: 60upx;
            color: #3D3F42;
            background: #F4F4F5;
            border-radius: 8upx;
            border-radius: 2px;
            margin-right: 30rpx;
            margin-top: 8px;
            font-size: 12px;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            &:nth-child(4n) {
              margin-right: 0;
            }
          }
        }
      }
    }

    .btn-box {
      flex-shrink: 0;
      width: 698rpx;
      height: 75px;
      flex-direction: row !important;
      align-items: center;
      justify-content: space-between;

      > view {
        width: 320rpx;
        height: 40px;
        border-radius: 40px;
        border: solid 1rpx $uni-color-primary;
        align-items: center;
        justify-content: center;
      }

      .reset {
        color: #626467;
        border-color: #D7D8DC;
      }

      .submit {
        color: #fff;
        background: $uni-color-primary;
      }
    }
  }

}

.sx-dropdown-menu__item--sort {
  display: flex;
  flex-direction: column;

  .sx-dropdown-menu__icon--top {
    transform: rotate(180deg);
    margin-bottom: -5px;
  }

  .sx-dropdown-menu__icon--bottom {
    margin-top: -5px;
  }
}
</style>